<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>学会详情</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />

    <style>
    	html, body {width: 100%;min-height: 100%;background: #fff;}
    	.h20 {height: 0.5rem;background: #f0f0f0;}


    .xsTab .aui-tab-item {
      border: none;
      position: relative;
      color: #999;
    }
    .xsTab .aui-tab-item:after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 50%;
      height: 2px;
      background: #fff;
      margin: auto;
    }
    .xsTab .aui-tab-item.aui-active {
      color: #2997e4;
    }
    .xsTab .aui-tab-item.aui-active:after {
      background: #2997e4;
    }
    .cxContent > div {
      display: none;
    }
    .xhjj {
      padding: 0.75rem;
    }
    .xhjj p {
      text-indent: 2em;
      font-size: 0.75rem;
			line-height: 1rem;
      margin-bottom: 0.5rem;
      color: #333;
    }
		.xhjj h5 {
      font-size: 0.75rem;
      margin-bottom: 0.5rem;
      color: #333;
    }
		.xhjj h6 {
      font-size: 0.75rem;
      margin-bottom: 1.5rem;
			text-align: right;
      color: #333;
    }
    .xhJoin {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2rem;
      line-height: 2rem;
      color: #fff;
      font-size: 0.75rem;
      text-align: center;
      background-color: #2997e4;
    }

		/* 数据 */
		.enshrine .aui-list-item-title {
			color: #333;
			line-height: 1rem;
			font-size: 0.75rem;
		}
		.enshrine .aui-info-item {
				color: #999;
				font-size: 0.6rem;
		}
		.enshrine .aui-list-item-media {
			width: 6.5rem;
		}
    .aui-list .registration_txtBot {
      color: #2997e4;
			font-size: 0.6rem;
    }
		.hdxx .aui-media-list .aui-list-item-inner {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-orient: vertical;
			box-orient: vertical;
			-webkit-flex-direction: column;
			flex-direction: column;
			-webkit-box-pack: justify;
			-webkit-justify-content: space-between;
			justify-content: space-between;
			-webkit-box-align: start;
			-webkit-align-items: flex-start;
			align-items: flex-start;
		}
		.zy {
			color: #999;
			font-size: 0.6rem;
		}
		.cyxx .aui-list-item-media {
			width: 4rem;
		}
		.itemIco {
			width: 100%;
			height: 4rem;
		}
		#header_top {
				background: #2997e4;
				padding-top: 25px;
				position: fixed;
				width: 100%;
				top: 0
		}
		#xsTab {
			position: fixed;
			width: 100%;
			top:70px;
		}
		body {
			padding-top: 105px;
		}
    .hdxx .aui-list-item .aui-info-item span {
      color: #ffb451;
      float: right;
    }

		.itemHIco {
				width: 3.25rem;
				height: 3.25rem;
				border-radius: 50%;
		}

		.itemIco {
				width: 100%;
				height: 4rem;
		}
    </style>
</head>
<body>
<div id="app" v-cloak>

	<header id="header_top" class="aui-bar aui-bar-nav" >

		<a class="aui-pull-left"  onclick="goback()">
				<span class="aui-iconfont aui-icon-left"></span>
		</a>
		<div class="aui-title" id="title">
		详情
	</div>
			<a class="aui-pull-right" onclick="join_group()"  v-if="isInterest == 0">
					群聊
			</a>
	</header>
  <div class="aui-tab xsTab" id="xsTab">
    <div class="aui-tab-item aui-active">兴趣圈简介</div>
    <div class="aui-tab-item">活动信息</div>
    <div class="aui-tab-item">会员信息</div>
  </div>

  <div class="h20"></div>
  <div class="cxContent" id="cxContent">
    <div class="xsBox xhjj" style="display: block;">
			<div v-if="data != null" v-html="data.content"></div>
			<h2 v-else style="text-align: center; color: #999">暂无数据</h2>

      <div class="xhJoin" @click="xqq()">
				<span style="color: #fff" v-if="isInterest == 1">加入兴趣圈</span>
        <span style="color: #fff" v-else-if="isInterest == 0">退出兴趣圈</span>
      </div>
    </div>
    <div class="xsBox hdxx">

			<div class="aui-content aui-margin-b-15 enshrine">
	        <ul class="aui-list aui-media-list" v-if="newsList1.length > 0">
						<li class="aui-list-item" tapmode="presshover" v-for="item in newsList1" @click="openNewWindow('activitydetails',item.title, item.id)">
								<div class="aui-media-list-item-inner">
										<div class="aui-list-item-media">
												<!-- <img src="../../image/banner1@3x.png"> -->
												<div v-if="item.images && item.images != ''" class="itemIco" :style="'background: url('+ item.images +') center/cover no-repeat'"></div>
							          <div v-else class="itemIco" style="background: url(../../image/banner1@3x.png) center/cover no-repeat"></div>
										</div>
										<div class="aui-list-item-inner">
												<div class="aui-list-item-text">
														<div class="aui-list-item-title">{{item.title}}</div>
												</div>
												<div class="aui-margin-t-5" style="width: 100%;">
														<div class="aui-info-item" style="font-size: 0.6rem;position:relative">{{item.apply_date}}<span style="position:absolute;right: 0;top:0">{{item.applyCount}}人已报名</span></div>
												</div>
										</div>
								</div>
						</li>
	        </ul>
					<h2 v-else style="text-align: center; color: #999">暂无数据</h2>
                <div class="xhJoin" @click="fqhd()">
                  发起活动
                </div>
	    </div>

    </div>
    <div class="xsBox cyxx">

			<div class="aui-content aui-margin-b-15 xhList">
			  <ul class="aui-list aui-media-list" v-if="newsList2.length > 0">
			    <li class="aui-list-item aui-list-item-middle" tapmode="presshover" v-for="item in newsList2" @click="openNewWindow('detailsinformation','详情资料', item.userid)">
			      <div class="aui-media-list-item-inner">
			        <div class="aui-list-item-media">
							<div v-if="item.head_img" class="itemHIco aui-img-round aui-list-img-sm" :style="'background: url('+ item.head_img +') center/cover no-repeat'"></div>
							<div v-else class="itemHIco aui-img-round aui-list-img-sm" style="background: url(../../image/wdr@3x.png) center/cover no-repeat"></div>
			        </div>
			        <div class="aui-list-item-inner">
								<div class="aui-list-item-title aui-font-size-14">{{item.nickname}}</div>
								<div class="zy">{{item.profession}}</div>
			        </div>
			      </div>
			    </li>
			  </ul>
				<h2 v-else style="text-align: center; color: #999">暂无数据</h2>
			</div>

    </div>
  </div>


	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script src="../../script/aui-tab.js"></script>
<script src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function() {
	var app = new Vue({
		el: '#app',
		data: {
			id: [],
			page1: 1,
			totalpage1: 1,
			page2: 1,
			totalpage2: 1,
			data: [],
			newsList1: [],
			newsList2: [],
			token: 0,
			isInterest: 1
		},
		created: function() {
			var $_this = this;
			$_this.id = api.pageParam.id
			// console.log($_this.id)
			$_this.token = $api.getStorage('token')
			if(!$api.getStorage('token')){
            			api.confirm( {
            					title: '是否登录',
            					msg: '确认是否登录？',
            					buttons: [ '确定', '取消' ]
            				}, function ( ret, err ) {
            					var index = ret.buttonIndex;
            					if ( index == 1 ) {
            						api.openWin({
            							name: 'login',
            							url: '../five_frame/login_header.html',
            							delay: 200,
            							bounces: false
            						});
            						return;
            					} else {
            						api.closeWin({
            								name: name
            						});
            						return
            					}
            				})
            				return
            			}
			api.ajax({
				url: window.Url.getInterestDetail + $_this.id,
				timeout: 300,
				headers: {
					  'baseParams': $api.getStorage('token')  //token
					},
			}, function(ret, err) {
					if (ret) {
							console.log(JSON.stringify(ret));
							if (ret.code == 2) {
                  alert('用户未登录，请返回登录')
                  $api.rmStorage('token')
                  $api.rmStorage('data')
                  goback()
                   return
                }
							$_this.data = ret.data
					} else {
							api.alert({ msg: JSON.stringify(err) });
					}
			})

			$_this.isApplyInterest()

			api.ajax({
				url: window.Url.getActivityList + $_this.id + '/' + $_this.page1,
				timeout: 300,
				headers: {
					  'baseParams': $api.getStorage('token') //token
					},
			}, function(ret, err) {
					if (ret) {
					// console.log(window.Url.getActivityList + $_this.id + '/' + $_this.page1)
						// api.alert({ msg: JSON.stringify(ret) });
						if (ret.code == 2) {
                  alert('用户未登录，请返回登录')
                  $api.rmStorage('token')
                  $api.rmStorage('data')
                  goback()
                   return
                }
						if (ret.data == null) {
							return
						}
							$_this.totalpage1 = ret.data.totalpage
							$_this.newsList1 = ret.data.newsList

					} else {
							api.alert({ msg: JSON.stringify(err) });
					}
			})
			var scroll = new auiScroll({
					listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
					distance:40 //判断到达底部的距离，isToBottom为true
			},function(ret){
				 if (ret.isToBottom) {
					 $_this.page1 ++
					 if ($_this.page1 > $_this.totalpage1) {
						 $_this.page1 = $_this.totalpage1
						 return
					 }
					 api.ajax({
						url: window.Url.getActivityList + $_this.id + '/' + $_this.page1,
						timeout: 300,
						headers: {
							  'baseParams':$api.getStorage('token')  //token
					},
					}, function(ret, err) {
							if (ret) {
								 //  api.alert({ msg: JSON.stringify(ret) });
									$_this.newsList1 = $_this.newsList1.concat(ret.data.newsList)


							} else {
									api.alert({ msg: JSON.stringify(err) });
							}
					})
				 }

			});
			api.ajax({
				url: window.Url.getAllInterestUser + $_this.id + '/' + $_this.page2,
				timeout: 300,
				headers: {
						'Content-Type': 'application/json',
							  'baseParams': $api.getStorage('token')  //token
				},
			}, function(ret, err) {
					if (ret) {
						if (ret.code == 2) {
                  alert('用户未登录，请返回登录')
                  $api.rmStorage('token')
                  $api.rmStorage('data')
                  goback()
                   return
                }
						// api.alert({ msg: JSON.stringify(ret) });
						if (ret.data == null) {
							return
						}
							$_this.totalpage2 = ret.data.totalpage
							$_this.newsList2 = ret.data.newsList

					} else {
							api.alert({ msg: JSON.stringify(err) });
					}
			})
		},
		methods: {
			fqhd: function () {
				var $_this = this;
					api.openWin({
						name: 'index_sj_fbhd',
						pageParam: {
							name: 'index_sj_fbhd',
							id:$_this.id
						},
						url: './index_sj_fbhd.html',
						delay: 200,
						bounces: false
					});
				},
				openNewWindow: function (type,title, id){
					api.openWin({
						name: type,
						url: './' + type + '.html',
						pageParam: {
							name: type,
							title: title,
							id: id
						},
						bounces: false,
						delay:200
					});
				},
				isApplyInterest: function () {
					var $_this = this
					api.ajax({
						url: window.Url.isApplyInterest + $_this.id,
						timeout: 300,
						headers: {
							  'baseParams': $api.getStorage('token') //token
					},
					}, function(ret, err) {
							if (ret) {
									// api.alert({ msg: JSON.stringify(ret) });
									$_this.isInterest = ret.code
							} else {
									api.alert({ msg: JSON.stringify(err) });
							}
					})
				},
				applyInterest: function () {
					var $_this = this
					api.confirm( {
		        title: '加入兴趣圈',
		        msg: '确认加入兴趣圈？',
		        buttons: [ '确定', '取消' ]
		      }, function ( ret, err ) {
		        var index = ret.buttonIndex;
		        if ( index == 1 ) {
							api.ajax({
								url: window.Url.applyInterest,
								timeout: 300,
								method: 'post',
								headers: {
										'Content-Type': 'application/json',
											  'baseParams': $api.getStorage('token')  //token
								},
								data: {
									body: {
										interestid: $_this.id
									}
								},
							}, function(ret, err) {
									if (ret) {
											if (ret.code == 0) {
												api.toast({ msg: '加入成功',duration: 2000,location:'middle' });
													$_this.isInterest = 0
											} else {
												api.toast({ msg: ret.message,duration: 2000,location:'middle' });
											}
									} else {
											api.alert({ msg: JSON.stringify(err) });
									}
							})
		        }
		      })
				},
				exitInterest: function () {
					var $_this = this
					api.confirm( {
		        title: '退出兴趣圈',
		        msg: '确认退出兴趣圈？',
		        buttons: [ '确定', '取消' ]
		      }, function ( ret, err ) {
		        var index = ret.buttonIndex;
		        if ( index == 1 ) {
		          api.ajax({
		            url: window.Url.exitInterest + $_this.id,
		            timeout: 300,
		            headers: {
		      					  'baseParams': $_this.token //token
		      					},
		          }, function(ret, err) {
		              if (ret) {
		                    // console.log(JSON.stringify(ret));
		                    if (ret.code == 0) {
		                      api.toast({ msg: '退出成功',duration: 2000,location:'middle' });
														$_this.isInterest = 1
		                    } else {
		                      api.toast({ msg: ret.message,duration: 2000,location:'middle' });
		                    }
		              } else {
		                  api.alert({ msg: JSON.stringify(err) });
		              }
		          })
		        }
		      })
				},
				xqq: function () {
					var $_this = this
					if ($_this.isInterest == 0) {
						$_this.exitInterest()
						// $_this.isInterest = 1
					} else if ($_this.isInterest == 1) {
						$_this.applyInterest()
						// $_this.isInterest = 0
					}
				}
		},
		mounted: function () {
			var $_this = this
			var tab = new auiTab({
		    element:document.getElementById("xsTab"),
		    index:1,
		    repeatClick:false
		  },function(ret){
		    var xsBox = document.querySelectorAll('.xsBox')
		    for (var i = 0; i < xsBox.length; i++) {
		      xsBox[i].style.display = 'none'
		    }
		    document.querySelectorAll('.xsBox')[ret.index - 1].style.display =  'block'
				if ($('.cyxx').css('display') == 'block') {
					var scroll = new auiScroll({
							listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
							distance:40 //判断到达底部的距离，isToBottom为true
					},function(ret){
						 if (ret.isToBottom) {
							 $_this.page1 ++
							 if ($_this.page1 > $_this.totalpage1) {
								 $_this.page1 = $_this.totalpage1
								 return
							 }
							 api.ajax({
				 				url: window.Url.getActivityList + $_this.id + '/' + $_this.page1,
								timeout: 300,
							}, function(ret, err) {
									if (ret) {
										 //  api.alert({ msg: JSON.stringify(ret) });
											$_this.newsList1 = $_this.newsList1.concat(ret.data.newsList)

									} else {
											api.alert({ msg: JSON.stringify(err) });
									}
							})
						 }

					});
				} else if ($('.hdxx').css('display') == 'block') {
					var scroll = new auiScroll({
							listen:true, //是否监听滚动高度，开启后将实时返回滚动高度
							distance:40 //判断到达底部的距离，isToBottom为true
					},function(ret){
						 if (ret.isToBottom) {
							 $_this.page2 ++
							 if ($_this.page2 > $_this.totalpage2) {
								 $_this.page2 = $_this.totalpage2
								 return
							 }
							 api.ajax({
				 				url: window.Url.getAllGroupUser,
								timeout: 300,
								headers: {
										'Content-Type': 'application/json'
								},
								data: {
									body: {
										page: $_this.page2,
										newsId: $_this.id
									}
								},
							}, function(ret, err) {
									if (ret) {
										 //  api.alert({ msg: JSON.stringify(ret) });
											$_this.newsList2 = $_this.newsList2.concat(ret.data.newsList)

									} else {
											api.alert({ msg: JSON.stringify(err) });
									}
							})
						 }

					});
				}
		  });
		},
		filters: {
			time: function (value) {
    		value = new Date(value)
				return value.getFullYear() + '-' + value.getMonth() + '-' + value.getDate()
			}
		}
	})
}



  function goback() {
    api.closeWin({name:api.pageParam.name});
  }



	function openDetail(type, title) {
    api.openWin({
      name: 'index_detail_' + type,
      pageParam: {
        name: 'index_detail_' + type,
        title: title
      },
      url: './first_header.html',
      delay: 200,
      bounces: false
    });
  }

	function join_group() {

	  api.openWin({
	    name: 'user_info_details_win',
	    url: '../forth_frame/user_info_details_win.html',
	    pageParam: {
	      id: api.pageParam.groupid,
	      name: api.pageParam.title,
	      chat_type:'GROUP'
	    }
	  });
	}



</script>
</html>
